<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>混合选择器</title>
    <style>
        /*div,p,span{*/
        /*    color:red;*/
        /*}*/
        /*后代元素*/
        .c1 .c2{
            color:green;
        }
        /*子元素*/
        .c3>.c4{
            color:blue;
        }
        /*紧跟着的同级元素*/
        .c5+span{
            color:red;
        }
        .c6+span{
            color:purple;
        }
        /*后面的同级元素*/
        .c7~span{
            color:red;
        }
    </style>
</head>
<body>
<h3>多个选择器之间以逗号分隔</h3>
<div>这是一个div</div>
<p>这是一个段落</p>
<span>这是一个span</span>
<h3>多个选择器之间以空格分隔</h3>
<div class="c1">
    <div class="c2">这是c1中的c2的div</div>
    <span class="c2">这是c1中的c2的span</span>
    <div>
        <div class="c2">这是c1中的div中的c2</div>
    </div>
    <div>这是c1中的div</div>
    <span>这是c1中的span</span>
</div>

<h3>多个选择器之间以>分隔</h3>
<div class="c3">
    <div class="c4">这是c3中的c4的div</div>
    <span class="c4">这是c3中的c4的span</span>
    <div>
        <div class="c4">这是c3中的div中的c4</div>
    </div>
    <div>这是c3中的div</div>
    <span>这是c3中的span</span>
</div>
<h3>多个选择器之间以+分隔</h3>
<div class="c5">
    这是c5
    <div>这是c5中的div</div>
    <span>这是c5中的span</span>
</div>
<span>这是c5后面的span</span>
<span>这是c5后面的span</span>
<span>这是c5后面的span</span>
<span>这是c5后面的span</span><br>
<hr>
<span class="c6">这是c6</span><br>
<span>这是c6后面的span</span><br>
<span>这是c6后面的span</span><br>
<span>这是c6后面的span</span><br>
<h3>多个元素以~分隔</h3>
<div class="c7">这是c7</div>
<span>这是c7后面的span</span>
<div>
    <span>这是c7后面的div中的span</span>
</div>
<span>这是c7后面的span</span>
<span>这是c7后面的span</span>
<span>这是c7后面的span</span>
<span>这是c7后面的span</span>
</body>
</html>